<template>
  <div>
      <div class="item" v-for="item of articles" :key="item.id" @click="goDetail(item._id)">
            <div class="header">
                <img class="headImg" :src="item.avatar">
                <span class="name">{{item.date}}</span>
            </div>
            <div class="title">{{item.title}}</div>
            <img class="contentImg"  :src="item.imgSrc">
            <div class="content">{{item.content}}</div>
            <div class="footer">
                <span>{{item.collectNum}}</span>
                |
                <span>{{item.reading}}</span>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles:[],
    }
  },
  mounted(){
    this.$http(`http://122.112.161.135:4000/api/article`).then(res=>{
      this.articles = res.data.res
    })
  },
  methods:{
      goDetail(id){
        //   console.log(id);
          this.$router.push(`/article/${id}`)
      }
  }
}
</script>

<style>
.container{
    background: #f8f8f8;
}
.item{
    background: #fff;
}
.header{
    display: flex;
    align-items: center;
}
.headImg{
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.66rem;
}
.name{
    color: #666;
}
.title{
    font-size: 0.5rem;
    font-weight: bold;
    margin: 0.25rem;
}
.contentImg{
    width: 100%;
}
.content{
    margin: 0.25rem 0.2rem;
    font-size: 0.3rem;
    color: #666;
}
.footer{
    display: flex;
    align-items: center;
    padding: 0.14rem;
}
.footer img{
    width: 0.45rem;
    height: 0.45rem;
}
.footer text{
    margin-left: 0.15rem;
    margin-right: 0.45rem;
}
</style>